Webbiztonsági Fejlécek Implementálása: JavaScript Tartalombiztonsági Irányelv (CSP)

A mai digitális világban a webbiztonság elsődleges fontosságú. A weboldal és a felhasználók védelme a rosszindulatú támadásokkal szemben már nem választható, hanem szükségszerűség. A Cross-Site Scripting (XSS) továbbra is elterjedt fenyegetés, és az egyik leghatékonyabb védekezési módszer egy erős Tartalombiztonsági Irányelv (Content Security Policy - CSP) bevezetése. Ez az útmutató a JavaScript kihasználására összpontosít a CSP kezeléséhez és telepítéséhez, dinamikus és rugalmas megközelítést biztosítva a webalkalmazások globális szintű védelméhez.

Mi az a Tartalombiztonsági Irányelv (CSP)?

A Tartalombiztonsági Irányelv (CSP) egy HTTP válasz fejléc, amely lehetővé teszi annak szabályozását, hogy a felhasználói ügynök (böngésző) milyen erőforrásokat tölthet be egy adott oldalhoz. Lényegében egy engedélyezőlistaként (whitelist) működik, meghatározva azokat az eredeteket, ahonnan szkriptek, stíluslapok, képek, betűtípusok és egyéb erőforrások betölthetők. Ezen források explicit meghatározásával jelentősen csökkentheti weboldala támadási felületét, sokkal nehezebbé téve a támadók számára a rosszindulatú kódok beinjektálását és az XSS támadások végrehajtását. Ez egy fontos rétege a mélységi védelemnek.

Miért használjunk JavaScriptet a CSP implementálásához?

Bár a CSP közvetlenül a webszerver konfigurációjában is beállítható (pl. Apache .htaccess vagy Nginx konfigurációs fájljában), a JavaScript használata számos előnyt kínál, különösen összetett vagy dinamikus alkalmazások esetében:

• Dinamikus irányelv generálás: A JavaScript lehetővé teszi a CSP irányelvek dinamikus generálását felhasználói szerepkörök, alkalmazásállapot vagy más futásidejű feltételek alapján. Ez különösen hasznos egyoldalas alkalmazások (SPA) vagy olyan alkalmazások esetében, amelyek nagymértékben támaszkodnak a kliensoldali renderelésre.
• Nonce-alapú CSP: A nonce-ok (kriptográfiailag véletlenszerű, egyszer használatos tokenek) használata rendkívül hatékony módja a beágyazott (inline) szkriptek és stílusok védelmének. A JavaScript képes ezeket a nonce-okat generálni és hozzáadni mind a CSP fejléchez, mind a beágyazott szkript/stílus címkékhez.
• Hash-alapú CSP: Statikus beágyazott szkriptek vagy stílusok esetében hasheket használhat bizonyos kódrészletek engedélyezésére. A JavaScript képes kiszámítani ezeket a hasheket és belefoglalni őket a CSP fejlécbe.
• Rugalmasság és irányítás: A JavaScript finomhangolt irányítást biztosít a CSP fejléc felett, lehetővé téve annak menet közbeni módosítását a specifikus alkalmazási igények alapján.
• Hibakeresés és jelentéskészítés: A JavaScript használható a CSP sértési jelentések rögzítésére és egy központi naplózó szerverre küldésére elemzés céljából, segítve a biztonsági problémák azonosítását és javítását.

A JavaScript CSP beállítása

Az általános megközelítés egy CSP fejléc karakterlánc generálását foglalja magában JavaScriptben, majd a megfelelő HTTP válasz fejléc beállítását a szerveroldalon (általában a háttérrendszer keretrendszerén keresztül). Különböző forgatókönyvekre fogunk konkrét példákat nézni.

1. Nonce-ok generálása

A nonce (number used once - egyszer használt szám) egy véletlenszerűen generált, egyedi érték, amelyet specifikus beágyazott szkriptek vagy stílusok engedélyezésére használnak. Így generálhat nonce-t JavaScriptben:

            function generateNonce() {
  const crypto = window.crypto || window.msCrypto; // For IE support
  if (!crypto || !crypto.getRandomValues) {
    // Fallback for older browsers without crypto API
    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  }
  const arr = new Uint32Array(1);
  crypto.getRandomValues(arr);
  return btoa(String.fromCharCode.apply(null, new Uint8Array(arr.buffer)));
}

const nonce = generateNonce();
console.log("Generated Nonce:", nonce);

            

              
                Copy
              
            
          

Ez a kódrészlet kriptográfiailag biztonságos nonce-t generál a böngésző beépített crypto API-jának használatával (ha elérhető), és egy kevésbé biztonságos módszerre vált vissza, ha az API nem támogatott. A generált nonce ezután base64 kódolású lesz a CSP fejlécben való használathoz.

2. Nonce-ok beillesztése beágyazott szkriptekbe

Miután van egy nonce-a, be kell illesztenie azt mind a CSP fejlécbe, mind a <script> címkébe:

HTML:

            <script nonce="YOUR_NONCE_HERE">
  // Your inline script code here
  console.log("Hello from inline script!");
</script>
            

              
                Copy
              
            
          

JavaScript (Szerveroldali):

            const nonce = generateNonce();
const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-inline'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;`;

// Example using Node.js with Express:
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', cspHeader);
  // Pass the nonce to the view or template engine
  res.locals.nonce = nonce;
  next();
});

            

              
                Copy
              
            
          

Fontos megjegyzések:

• Cserélje ki a YOUR_NONCE_HERE-t a HTML-ben a ténylegesen generált nonce-ra. Ezt gyakran szerveroldalon végzik egy sablonkezelő motor segítségével. A fenti példa bemutatja a nonce átadását a sablonkezelő motornak.
• A CSP fejléc script-src direktívája most már tartalmazza a 'nonce-${nonce}'-t, ami lehetővé teszi a megfelelő nonce-szal rendelkező szkriptek futtatását.
• A script-src direktívához hozzáadásra kerül a 'strict-dynamic'. Ez a direktíva azt mondja a böngészőnek, hogy bízzon meg azokban a szkriptekben, amelyeket megbízható szkriptek töltenek be. Ha egy szkript címkének érvényes nonce-a van, akkor minden szkript, amit dinamikusan betölt (pl. `document.createElement('script')` használatával), szintén megbízhatónak minősül. Ez csökkenti a számos egyedi domain és CDN URL engedélyezésének szükségességét, és nagyban leegyszerűsíti a CSP karbantartását.
• Az 'unsafe-inline' használata általában nem javasolt nonce-ok használatakor, mivel gyengíti a CSP-t. Azonban itt demonstrációs célokból szerepel, és éles környezetben el kell távolítani. Távolítsa el ezt, amint csak tudja.

3. Hashek generálása beágyazott szkriptekhez

Ritkán változó, statikus beágyazott szkriptekhez nonce-ok helyett hasheket is használhat. A hash a szkript tartalmának kriptográfiai kivonata. Ha a szkript tartalma megváltozik, a hash is megváltozik, és a böngésző letiltja a szkriptet.

A Hash kiszámítása:

Online eszközöket vagy parancssori segédprogramokat, mint például az OpenSSL, használhat a beágyazott szkript SHA256 hashének generálásához. Például:

            openssl dgst -sha256 -binary your_script.js | openssl base64
            

              
                Copy
              
            
          

Példa:

Tegyük fel, hogy a beágyazott szkriptje a következő:

            <script>
  console.log("Hello from inline script!");
</script>
            

              
                Copy
              
            
          

Ennek a szkriptnek az SHA256 hashe (a <script> címkék nélkül) valami ilyesmi lehet:

            sha256-YOUR_HASH_HERE
            

              
                Copy
              
            
          

CSP Fejléc:

            const cspHeader = `default-src 'self'; script-src 'self' 'sha256-YOUR_HASH_HERE'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;`;
            

              
                Copy
              
            
          

Cserélje ki a YOUR_HASH_HERE-t a szkript tartalmának tényleges SHA256 hashével.

Fontos szempontok a hashekkel kapcsolatban:

• A hasht a szkript pontos tartalmára kell kiszámítani, beleértve a szóközöket is. Bármilyen változtatás a szkripten, akár egyetlen karakter is, érvényteleníti a hasht.
• A hashek leginkább ritkán változó statikus szkriptekhez alkalmasak. Dinamikus szkriptek esetén a nonce-ok jobb választást jelentenek.

4. A CSP fejléc beállítása a szerveren

Az utolsó lépés a Content-Security-Policy HTTP válasz fejléc beállítása a szerveren. A pontos módszer a szerveroldali technológiától függ.

Node.js Express-szel:

            app.use((req, res, next) => {
  const nonce = generateNonce();
  const cspHeader = `default-src 'self'; script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-inline'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;`;
  res.setHeader('Content-Security-Policy', cspHeader);
  res.locals.nonce = nonce; // Make nonce available to templates
  next();
});
            

              
                Copy
              
            
          

Python Flask-kel:

            from flask import Flask, make_response, render_template, g
import os
import base64

app = Flask(__name__)

def generate_nonce():
    return base64.b64encode(os.urandom(16)).decode('utf-8')

@app.before_request
def before_request():
    g.nonce = generate_nonce()

@app.after_request
def after_request(response):
    csp = "default-src 'self'; script-src 'self' 'nonce-{nonce}' 'strict-dynamic' 'unsafe-inline'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests".format(nonce=g.nonce)
    response.headers['Content-Security-Policy'] = csp
    return response

@app.route('/')
def index():
    return render_template('index.html', nonce=g.nonce)

            

              
                Copy
              
            
          

PHP:

            <?php
function generateNonce() {
  return base64_encode(random_bytes(16));
}

$nonce = generateNonce();
header("Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-" . $nonce . "' 'strict-dynamic' 'unsafe-inline'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests");
?>
<!DOCTYPE html>
<html>
<head>
  <title>CSP Example</title>
</head>
<body>
  <script nonce="<?php echo htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8'); ?>">
    console.log("Hello from inline script!");
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Apache (.htaccess):

Bár dinamikus CSP esetén nem ajánlott, statikus CSP-t beállíthat .htaccess használatával:

            <IfModule mod_headers.c>
  Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;"
</IfModule>
            

              
                Copy
              
            
          

Nginx:

            add_header Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'; upgrade-insecure-requests;";
            

              
                Copy
              
            
          

Fontos megjegyzések:

• Cserélje ki a 'self'-et azokkal a tényleges domain(ek)kel, ahonnan engedélyezni szeretné az erőforrások betöltését.
• Legyen rendkívül óvatos az 'unsafe-inline' és az 'unsafe-eval' használatakor. Ezek a direktívák jelentősen gyengítik a CSP-t, és kerülni kell őket, amikor csak lehetséges.
• Használja az upgrade-insecure-requests-t az összes HTTP kérés automatikus HTTPS-re való frissítéséhez.
• Fontolja meg a report-uri vagy report-to használatát egy végpont megadásához a CSP sértési jelentések fogadására.

CSP direktívák magyarázata

A CSP direktívákat használ a különböző típusú erőforrások engedélyezett forrásainak meghatározására. Íme egy rövid áttekintés a leggyakoribb direktívákról:

• default-src: Meghatározza az alapértelmezett forrást minden olyan erőforrás számára, amelyet más direktívák nem fednek le explicit módon.
• script-src: Meghatározza a JavaScript engedélyezett forrásait.
• style-src: Meghatározza a stíluslapok engedélyezett forrásait.
• img-src: Meghatározza a képek engedélyezett forrásait.
• font-src: Meghatározza a betűtípusok engedélyezett forrásait.
• media-src: Meghatározza az audio- és videoforrások engedélyezett forrásait.
• object-src: Meghatározza a pluginek (pl. Flash) engedélyezett forrásait. Általában ezt 'none'-ra kell állítani a pluginek letiltásához.
• frame-src: Meghatározza a keretek és iframe-ek engedélyezett forrásait.
• connect-src: Meghatározza az XMLHttpRequest, WebSocket és EventSource kapcsolatok engedélyezett forrásait.
• base-uri: Meghatározza a dokumentum engedélyezett alap URI-jait.
• form-action: Meghatározza az űrlapok beküldésének engedélyezett végpontjait.
• upgrade-insecure-requests: Arra utasítja a felhasználói ügynököt, hogy egy webhely összes nem biztonságos URL-jét (azokat, amelyeket HTTP-n keresztül szolgáltatnak ki) úgy kezelje, mintha biztonságos URL-ekkel (HTTPS-en keresztül szolgáltatottakkal) helyettesítették volna őket. Ez a direktíva olyan webhelyek számára készült, amelyeket teljesen átállítottak HTTPS-re.
• report-uri: Meghatároz egy URI-t, ahová a böngészőnek a CSP sértésekről szóló jelentéseket kell küldenie. Ez a direktíva elavult, a `report-to` javára.
• report-to: Meghatároz egy elnevezett végpontot, ahová a böngészőnek a CSP sértésekről szóló jelentéseket kell küldenie.

CSP forráslista kulcsszavak

Minden direktíva egy forráslistát használ az engedélyezett források meghatározására. A forráslista a következő kulcsszavakat tartalmazhatja:

• 'self': Engedélyezi az erőforrásokat ugyanabból az eredetből (séma, hoszt és port).
• 'none': Tiltja az erőforrásokat bármely eredetből.
• 'unsafe-inline': Engedélyezi a beágyazott szkripteket és stílusokat. Kerülje ezt, amikor csak lehetséges.
• 'unsafe-eval': Engedélyezi az eval() és a kapcsolódó függvények használatát. Kerülje ezt, amikor csak lehetséges.
• 'strict-dynamic': Meghatározza, hogy a bizalmat, amelyet a böngésző egy szkriptnek ad az oldalon egy kísérő nonce vagy hash miatt, propagálni kell az adott szkript által betöltött szkriptekre.
• 'data:': Engedélyezi a data: sémán keresztül betöltött erőforrásokat (pl. beágyazott képek). Óvatosan használja.
• 'mediastream:': Engedélyezi a mediastream: sémán keresztül betöltött erőforrásokat.
• https:: Engedélyezi a HTTPS-en keresztül betöltött erőforrásokat.
• http:: Engedélyezi a HTTP-n keresztül betöltött erőforrásokat. Általában nem javasolt.
• *: Engedélyezi az erőforrásokat bármely eredetből. Kerülje ezt; ez meghiúsítja a CSP célját.

CSP sértések jelentése

A CSP sértések jelentése kulcsfontosságú a CSP felügyeletéhez és hibakereséséhez. Amikor egy erőforrás megsérti a CSP-t, a böngésző jelentést küldhet egy megadott URI-ra.

Jelentési végpont beállítása:

Szüksége lesz egy szerveroldali végpontra a CSP sértési jelentések fogadásához és feldolgozásához. A jelentés JSON payloadként kerül elküldésre.

Példa (Node.js Express-szel):

            app.post('/csp-report', (req, res) => {
  console.log('CSP Violation Report:', req.body);
  // Process the report (e.g., log to a file or database)
  res.status(204).end(); // Respond with a 204 No Content status
});
            

              
                Copy